<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<base href="<%=basePath%>">
<%@include file="/esayuiStyle.jsp" %>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<link rel="stylesheet" href="insdep/plus/upload/style.css" />
<link rel="stylesheet" href="css/fileImage.css" />
<script type="text/javascript">
	
	$(function(){
		$("#userTable").datagrid({
			pagination:true,
			toolbar:'#tb',
			idField:"id",
			onLoadSuccess:function(){
				$("a.op").tooltip({
					position:'right'
				});
			}
		})
		 
	})
	
	function userSetCondition(){
		alert($("#name").val());
		var postData = {name:$("#name").val()};
		
		var ids = $("#roleIds").combobox("getValues");
		for (var i = 0; i < ids.length; i++) {
			postData["roles["+i+"].id"] = ids[i];
			
		}
		postData["section.id"]=$("#section").val();
		console.log(postData);
		$("#userTable").datagrid("reload",postData);
	}
	
	function opFormatter(value,row,index){
		return "<a href='javascript:void(0)' title='分配权限' onclick='assignPermission("+row.id+");' class='op'><img src='easyui/themes/icons/large_chart.png' width='16'/></a>";
	}

	function genderFormatter(value,row,index){
		var a = "";
		if(value==1){
			a="男"
		}else{
			a="女"
		}
		return a;
	}
	function addressFormatter(value,row,index){
		return row.address.name;
	}
	function imageFormatter(value,row,index){
		if(row.image!=null){
			return "<img src='"+row.image+"' alt='' width='50' height='50' />";q			
		}
	}
	function sectionFormatter(value,row,index){
		
		if(row.section!=null){
			return row.section.name;			
		}
	}
	function roleFormatter(value,row,index){
		if(value.length ==0){
			return "大哥";
		}
		var str = "";
		for (var i = 0; i < value.length; i++) {
			str+= value[i].name;
			if(i<value.length-1){
				str+=",";
			}
		}
		return str;

	}
	function addUser(){
		addDialog("添加用户",500,820,"user/userForm","#userForm","user/addUser","$userTable");
	}
	
	function deleteUser(){
		deleteConfirm("#userTable","user/deleteUser");
	}
	
	function editUser(){
		var row = $("#userTable").datagrid("getSelected");
		if(row==null){
			$.messager.alert("提示","请选择要修改的数据行","warning");
			return;
		}
		$("#userTable").datagrid("clearSelections");
		$("#userTable").datagrid("selectRecord",row.id);
		var d = $("<div></div>").appendTo("body");
		d.dialog({
			title:"修改用户",
			iconCls:"icon-edit",
			width:500,
			height:820,
			modal:true,
			href:"user/userForm",
			onClose:function(){$(this).dialog("destroy");},
			onLoad:function(){
				$.post("user/selectUserById",{id:row.id},function(data){
					$("#userForm").form("load",data);
					$("#qu").combobox("select",data.address.id);
					
					var roles = new Array();
					$.each(data.roles,function(){
						roles.push(this.id);
					})
					$("#roles").combobox("setValues",roles);
					$("#section").combobox("select",1);
					$("#preview").attr("src",data.image);
				})
			},
			buttons:[{
				iconCls:"icon-ok",
				text:"确定",
				handler:function(){
					$("#userForm").form("submit",{
						url:"user/editUser",
						success:function(data){
							d.dialog("close");
							$("#userTable").datagrid("reload");
							
						}
					})
				}
			},{
				iconCls:"icon-cancel",
				text:"取消",
				handler:function(){
					d.dialog("close");
				}
			}]
			
		})
	}
</script>
<body>


<div id="tb">
	<form id="userCondition">
		<label class="textbox-label textbox-label-left" for="#name" style="text-align: left; height: 26px; width:35px; line-height: 26px;">名字:</label>
		<input class="easyui-textbox" id="name" name="name" style="width:150px;" data-options="">
		 <label class="textbox-label textbox-label-left" for="userCode" style="text-align: left; height: 26px; margin-left:15px; width:35px; line-height: 26px;">账号:</label>
		 <input class="easyui-textbox" id="userCode" name="userCode" style="width:150px;" data-options="">
	     <label class="textbox-label textbox-label-left" for="userCode" style="text-align: left; height: 26px; margin-left:15px; width:35px; line-height: 26px;">科室:</label>
	     <input id="section" class="easyui-combobox" name="section.id" style="width:150px;" data-options=" 
		      url:'section/selectAll', 
		      method:'get', 
		      valueField:'id', 
		      textField:'name', 
		      panelheight:'auto'
	      ">
	      <label class="textbox-label textbox-label-left" for="userCode" style="text-align: left; height: 26px; margin-left:15px; width:35px; line-height: 26px;">角色:</label>
			<input class="easyui-tagbox" id="roleIds" name="roleIds" style="width:150px;" data-options="
				url: 'role/selectAll',
				method: 'get',
				valueField: 'id',
				textField: 'name',
				limitToList: true,
				hasDownArrow: true,
				prompt: 'Select a role',
				labelposition:'left',
				panelMaxWidth:'300',
				multiple:true,
				multiple:true,editable:false
			">
    	<a id="btn" href="javaScript:void(0)" onclick="userSetCondition()" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true">serch</a>
		<a  href="javaScript:void(0)" onclick="addUser()" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a>
		<a  href="javaScript:void(0)" onclick="editUser()" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a>
		<a  href="javaScript:void(0)" onclick="deleteUser()" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
	</form>
</div>
<table id="userTable" title="userList" 
    data-options="url:'user/listByCondition',fitColumns:true,striped:true,rownumbers:true,iconCls:'icon-search'">
    
    <thead>
		<tr>
			<th data-options="field:'asddsa',checkbox:true" ></th>
			<th data-options="field:'id',width:30,sortable:true,order:'desc'">Id</th>
			<th data-options="field:'userCode',width:100,sortable:true,order:'desc'	">userCode</th>
			<th data-options="field:'name',width:100,sortable:true,order:'desc'	">name</th>
			<th data-options="field:'password',width:200">password</th>
			<th data-options="field:'salt',width:200">salt</th>
			<th data-options="field:'gender',width:200,formatter:genderFormatter">gender</th>
			<th data-options="field:'age',width:200">age</th>
			<th data-options="field:'birthday',width:200">birthday</th>
			<th data-options="field:'createTime',width:200">createTime</th>
			<th data-options="field:'address.name',width:200,formatter:addressFormatter">addressId</th>
			<th data-options="field:'detailed',width:200">datailed</th>
			<th data-options="field:'phone',width:200">phone</th>
			<th data-options="field:'roles',width:200,formatter:roleFormatter">role:</th>
			<th data-options="field:'section.name',width:200,formatter:sectionFormatter">section</th>					
			<th data-options="field:'image',width:200,formatter:imageFormatter">image</th>
			
			<th data-options="field:'hello',width:50,formatter:opFormatter">操作</th>
		</tr>
    </thead>
</table>
</body>
</html>